<template>
  <div class="permission">
    <el-row class="add-btn" type="flex" justify="end"><el-button type="primary" size="small" @click="addPermissionFn">添加权限</el-button></el-row>
    <el-table stripe :data="tableData" border style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="title" label="权限名称" min-width="180" />
      <el-table-column prop="code" label="权限标识" min-width="180" />
      <el-table-column prop="description" label="权限描述" min-width="180" />
      <el-table-column v-slot="{ row }" label="操作" min-width="250">
        <el-button v-if="row.type === '1'" type="primary" size="small" @click="addSonPermissionFn(row)">添加子权限</el-button>
        <el-button size="small" @click="editPermissionFn(row)">编辑</el-button>
        <el-button type="danger" size="small" @click="deletePermissionFn(row)">删除</el-button>
      </el-table-column>
    </el-table>

    <permiss-dialog ref="permissDialogRef" :dialog-visible.sync="dialogVisible" @updatePermission="getPermissionListFn"></permiss-dialog>
  </div>
</template>

<script>
import { getPermissionList, deletePermission } from '@/api/permission'
import PermissDialog from './cnps/permissDialog.vue'
export default {
  components: { PermissDialog },
  data() {
    return {
      tableData: [],
      dialogVisible: false
    }
  },
  created() {
    this.getPermissionListFn()
  },
  methods: {
    // 删除权限
    deletePermissionFn(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deletePermission(row.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getPermissionListFn()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑权限
    editPermissionFn(row) {
      this.dialogVisible = true
      // 调用子组件方法，初始化一些参数，一级权限
      this.$refs.permissDialogRef.editHandleParamsFn({ ...row })
    },
    // 新增权限
    addPermissionFn() {
      this.dialogVisible = true
      // 调用子组件方法，初始化一些参数，一级权限
      this.$refs.permissDialogRef.addHandleParamsFn('0', '1')
    },
    // 新增子权限
    addSonPermissionFn(row) {
      this.dialogVisible = true
      // 调用子组件方法，初始化一些参数，一级权限
      this.$refs.permissDialogRef.addHandleParamsFn(row.id + '', '2')
    },

    // 获取所有权限方法
    async getPermissionListFn() {
      const res = await getPermissionList({ limit: 1000, offset: 0 })
      console.log(res)
      // 将后台数据转换位tree结构
      this.tableData = this._recursionMapTree(res, '0')
    },
    _recursionMapTree(data, pid) {
      const arr = []
      data.forEach((item) => {
        if (item.pid == pid) {
          arr.push(item)
          item.children = this._recursionMapTree(data, item.id)
        }
      })
      return arr
    }
  }
}
</script>

<style scpoed lang="scss">
.permission {
  padding: 20px;
  .add-btn {
    margin-bottom: 20px;
  }
}
.pagination {
  margin-top: 10px;
}
// ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
//   background-color: red;
// }
// .el-table__row:hover {
//   background-color: red;
// }
</style>
